<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="Pedido de Repuestos"></h:outputText>
        </ui:define>
        <ui:define name="cuerpo">

            <p:growl id="message" showDetail="true" />
            <h:form id="form" >  
                <p:growl id="validacionMensaje" showDetail="true" autoUpdate="true"/>
                <p:panel header="Administración de Pedido de Repuestos" style="font-size: small">                                            

                    <table width="100%" border="0">                    
                        <p:commandButton process="@this" style="margin-top: 10px" action="#{detallePedidoBean.cargarNuevo()}" value="Crear" update="@form:dlDialog" oncomplete="PF('dlDialogVar').show()"/>
                    </table> 

                    <p:dataTable id="dtPedido" var="item" value="#{detallePedidoBean.pedidos}" widgetVar="tablaPedidos"                                                                  
                                 emptyMessage="Sin Datos"
                                 style="margin-top: 10px; font-size: small"                                
                                 paginator="true" rows="10" rowKey="#{item.codPedido}">

                        <f:facet name="header">
                            <p:outputPanel>
                                <h:outputText value="Buscar por todos los criterios:" />
                                <p:inputText id="globalFilter" onkeyup="PF('tablaPedidos').filter()" style="width:200px" placeholder="Ingrese la palabra clave"/>
                            </p:outputPanel>
                        </f:facet>                                             
                        <p:column headerText="Nombre" filterBy="#{item.nombre}" >
                            <div align="center">
                                <h:outputText value="#{item.nombre}"/>
                            </div>
                        </p:column> 
                        <p:column headerText="Fecha Pedido" filterBy="#{item.fechaPedido}" >
                            <div align="center">
                                <h:outputText value="#{item.fechaPedido}" >
                                    <f:convertDateTime type="date" locale="es_EC" timeZone="America/Guayaquil"  
                                                       dateStyle="default" pattern="yyyy-MMMM-dd" />
                                </h:outputText>
                            </div>
                        </p:column>      

                        <p:column headerText="Estado" filterBy="#{item.estado}" >
                            <div align="center">
                                <h:outputText value="#{item.estado ? 'EN ESPERA' : 'FINALIZADO'}"/>
                            </div>
                        </p:column>  

                        <p:column headerText="Herramientas" >                                                        
                            <div align="center">
                                <p:commandButton value="Gestionar" action="#{detallePedidoBean.cargarModificar()}" update="@form:dlDialog" 
                                                 process="@this" oncomplete="PF('dlDetalleVar').show()">
                                    <f:setPropertyActionListener value="#{item}" target="#{detallePedidoBean.pedido}" />
                                </p:commandButton>                                                                                            
                            </div>
                        </p:column>                                                            
                    </p:dataTable>

                    <p:dialog dynamic="true" id="dlDialog" resizable="false" header="#{detallePedidoBean.tituloDialogo}" appendTo="@(body)" 
                              widgetVar="dlDialogVar" modal="true" showEffect="fade" hideEffect="fade"
                              style="font-size: small">                      
                        <p:panel  id="dlPedido" style="text-align:center; width: 75%">

                            <p:panelGrid columns="2" columnClasses="label,value">                                                                                        

                                <p:outputLabel for="txtNombre" value="Nombre:" />
                                <p:inputText onkeyup="value = value.toUpperCase()" style="text-align: center" id="txtNombre" value="#{detallePedidoBean.pedido.nombre}" required="true" requiredMessage="El campo 'Nombre' es requerido" readonly="#{pedidoBean.soloLectura}"/>

                                <!-- <p:outputLabel for="txtFechaPedido" value="Fecha Pedido:" />
                                 <p:calendar id="txtFechaPedido" value="#{pedidoBean.pedido.fechaPedido}" pattern="yyyy/dd/MM"  style="text-align: center" required="true" requiredMessage="El campo 'Fecha Pedido' es requerido" readonly="#{pedidoBean.soloLectura}"/>
                                
                                
                                <p:outputLabel rendered="#{pedidoBean.activarModificar || pedidoBean.soloLectura}"
                                               for="txtFechaEntrega" value="Fecha Entrega:" />
                                <p:calendar rendered="#{pedidoBean.activarModificar || pedidoBean.soloLectura}" id="txtFechaEntrega" value="#{pedidoBean.pedido.fechaEntrega}" pattern="yyyy/dd/MM"  style="text-align: center" required="true" requiredMessage="El campo 'Fecha Entrega' es requerido" readonly="#{pedidoBean.soloLectura}"/>
                                -->

                                <p:outputLabel rendered="#{detallePedidoBean.soloLectura}"   for="txtFechaInicial" value="Fecha Pedido: " />
                                <p:calendar  rendered="#{detallePedidoBean.soloLectura}" style=" margin-top: 10px" locale="es"  value="#{detallePedidoBean.pedido.fechaPedido}"                                                     
                                             size="21" id="txtFechaInicial" pattern="yyyy/dd/MM" mode="popup" showOn="button">
                                    <f:convertDateTime type="date" locale="es_EC" timeZone="America/Guayaquil"  
                                                       dateStyle="default" pattern="yyyy/dd/MM" />
                                </p:calendar>

                                <p:outputLabel rendered="#{detallePedidoBean.soloLectura}"   for="txtFechaFinal" value="Fecha Entrega: " />
                                <p:calendar rendered="#{detallePedidoBean.soloLectura}"  style=" margin-top: 10px" locale="es"  value="#{detallePedidoBean.pedido.fechaEntrega}"                                                     
                                            size="21" id="txtFechaFinal" pattern="yyyy/dd/MM" mode="popup" showOn="button">
                                    <f:convertDateTime type="date" locale="es_EC" timeZone="America/Guayaquil"  
                                                       dateStyle="default" pattern="yyyy/dd/MM" />
                                </p:calendar>


                                <p:outputLabel rendered="#{detallePedidoBean.soloLectura}" for="txtFechaCreacion" value="Fecha de Creación:" />
                                <p:inputText style="text-align: center" rendered="#{pedidoBean.soloLectura}" id="txtFechaCreacion"  value="#{pedidoBean.pedido.fechaCreacion}" readonly="true">
                                    <f:convertDateTime type="date" locale="es_EC" timeZone="America/Guayaquil"  
                                                       dateStyle="default" pattern="yyyy/dd/MM" />
                                </p:inputText>                                

                                <p:outputLabel rendered="#{detallePedidoBean.activarModificar || detallePedidoBean.soloLectura}" for="txtEstado" value="Estado:" />
                                <p:selectBooleanCheckbox style="text-align: center" rendered="#{pedidoBean.activarModificar || pedidoBean.soloLectura}" disabled="#{pedidoBean.soloLectura}"  id="txtEstado" value="#{pedidoBean.pedido.estado}"/>                                

                            </p:panelGrid>

                            <div align="right">
                                <p:outputLabel value = "* Campos Obligatorios"/>
                            </div>
                            <br/>
                            <div align="center">
                                <p:commandButton rendered="#{detallePedidoBean.activarNuevo}" 
                                                 update=":form:dtPedido,@form:dlDialog:dlPedido"
                                                 oncomplete="PF('dlDetalleVar').show()"
                                                 actionListener="#{detallePedidoBean.guardar()}" partialSubmit="true" process="@form:dlDialog"
                                                 value="Guardar">                                  
                                    <p:confirm header="Confirmación" message="Esta seguro de guardar este registro?" icon="ui-icon-alert" />
                                </p:commandButton>                                                                   
                            </div>
                            <div align="center">
                                <p:commandButton rendered="#{detallePedidoBean.activarModificar}" 
                                                 update=":form:dtPedido,@form:dlDialog:dlPedido"
                                                 actionListener="#{detallePedidoBean.modificar()}"  partialSubmit="true" process="@form:dlDialog"
                                                 value="Modificar">                                  
                                    <p:confirm header="Confirmación" message="Esta seguro de modificar este registro?" icon="ui-icon-alert" />
                                </p:commandButton>                                     
                            </div>                            
                        </p:panel>          
                    </p:dialog>

                    <p:dialog dynamic="true" id="dlDetalle" resizable="false" header="Pedido" appendTo="@(body)" 
                              widgetVar="dlDetalleVar" modal="true" showEffect="fade" hideEffect="fade"
                              style="font-size: small">    
                        <p:panel id="panelPedido" header="Cabecera de Pedido">
                            <p:panelGrid columns="2" >                                                                                        

                                <p:outputLabel for="cabCodigo" value="Código de Pedido:"/>
                                <p:inputText id="cabCodigo" value="#{detallePedidoBean.pedido.codPedido}" readonly="#{true}"/>

                                <p:outputLabel for="cabNombre" value="Nombre:"/>
                                <p:inputText id="cabNombre" value="#{detallePedidoBean.pedido.nombre}" readonly="#{true}"/>

                                <p:outputLabel for="cabFechaPedido" value="Fecha de pedido:"/>
                                <p:inputText id="cabFechaPedido" value="#{detallePedidoBean.pedido.fechaPedido}" readonly="#{true}"/>

                            </p:panelGrid>
                        </p:panel>

                        <p:panel id="panelDetalle" header="Detalle Pedido">
                            <p:commandButton process="@this" action="#{detallePedidoBean.cargarNuevoDetalle()}" style="margin-top: 10px" value="Agregar" update="@form:dlEleccion" oncomplete="PF('dlEleccionVar').show()"/>
                            <p:dataTable id="dtDetallesPedido" var="item" value="#{detallePedidoBean.detallesPedidos}" widgetVar="tablaDetallePedido"                                                                  
                                         emptyMessage="Sin Datos"
                                         style="margin-top: 10px; font-size: small"                                
                                         paginator="true">

                                <f:facet name="header">
                                    <p:outputPanel>
                                        <h:outputText value="Buscar por todos los criterios:" />
                                        <p:inputText id="globalFilter" onkeyup="PF('tablaDetallePedido').filter()" style="width:200px" placeholder="Ingrese la palabra clave"/>
                                    </p:outputPanel>
                                </f:facet>                                             

                                <p:column headerText="Nombre Repuesto" filterBy="#{item.repuesto.nombre}" >
                                    <div align="center">
                                        <h:outputText value="#{item.repuesto.nombre}"/>
                                    </div>
                                </p:column>                                                                        

                                <p:column headerText="Precio Unitario" filterBy="#{item.precioUnitario}" >
                                    <div align="center">
                                        <h:outputText value="#{item.precioUnitario}"/>
                                    </div>
                                </p:column>        

                                <p:column headerText="Cantidad" filterBy="#{item.cantidad}" >
                                    <div align="center">
                                        <h:outputText value="#{item.cantidad}"/>
                                    </div>
                                </p:column>        


                            </p:dataTable>
                            <p:commandButton process="@this" action="#{detallePedidoBean.finalizarManteniminto()}" 
                                             style="margin-top: 10px" value="Cerrar Pedido" 
                                             update="@form:dlDetalle:dtPedido"/>
                        </p:panel>

                    </p:dialog>


                    <p:dialog dynamic="true" id="dlEleccion" resizable="false" header="Detalle de pedido" appendTo="@(body)" 
                              widgetVar="dlEleccionVar" modal="true" showEffect="fade" hideEffect="fade"
                              style="font-size: small">    

                        <p:panelGrid columns="2" >

                            <p:outputLabel  for="cmbRepuesto" value="Repuesto:" />
                            <p:selectOneMenu filter="true" filterMatchMode="startsWith" disabled="#{detallePedidoBean.soloLectura}" 
                                             id="cmbRepuesto" value="#{detallePedidoBean.detallePedido.repuesto}" 
                                             required="true" requiredMessage="El campo 'Repuesto' es requerido" style="width: 200px" 
                                             styleClass="menu" panelStyleClass="panel">                                                                        
                                <f:selectItem itemLabel="Selecciones..." itemValue="#{null}" noSelectionOption="true" />
                                <f:selectItems value="#{repuestoBean.repuestos}" var="repuesto" 
                                               itemLabel="#{repuesto.nombre}" itemValue="#{repuesto}"/>
                                <f:converter converterId = "repuestoConverter"/>                                     
                            </p:selectOneMenu> 

                            <p:outputLabel  for="txtCantidad" value="Cantidad:" />
                            <p:spinner style="width: 200px" id="txtCantidad" min="0" max="100" value="#{detallePedidoBean.detallePedido.cantidad}" required="true" requiredMessage="El campo 'Cantidad' es requerido" readonly="#{detallePedidoBean.soloLectura}" />                                

                        </p:panelGrid>                        
                        <div align="center">
                            <p:commandButton update=":form:dtDetallesPedido,@form:dlEleccion:dtDetallesPedido"
                                             actionListener="#{detallePedidoBean.agregarDetalle()}"  partialSubmit="true" process="@form:dlEleccion"
                                             value="Agregar Detalle">                                  
                                <p:confirm header="Confirmación" message="Esta seguro de modificar este registro?" icon="ui-icon-alert" />
                            </p:commandButton>                                                                 
                        </div>
                    </p:dialog>


                </p:panel>
                <p:confirmDialog style="font-size: small" global="true" showEffect="fade" hideEffect="explode">
                    <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                    <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                </p:confirmDialog>
            </h:form>
        </ui:define>
    </ui:composition>
</html>

<!--



<p:panel  id="dlRepuesto" style="text-align:center;  width: 75%">

    <p:panelGrid columns="2" rendered="#{not empty detallePedidoBean.pedido}" columnClasses="label,value">                                                                                        

        <p:outputLabel  for="cmbRepuesto" value="Repuesto:" />
        <p:selectOneMenu filter="true" filterMatchMode="startsWith" disabled="#{detallePedidoBean.soloLectura}" 
                         id="cmbRepuesto" value="#{detallePedidoBean.repuesto.nombre}" 
                         required="true" requiredMessage="El campo 'Repuesto' es requerido" style="width: 200px" 
                         styleClass="menu" panelStyleClass="panel">                                                                        
            <f:selectItem itemLabel="Selecciones..." itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{repuestoBean.repuestos}" var="repuesto" 
                           itemLabel="#{repuesto.nombre}" itemValue="#{repuesto}"/>
            <f:converter converterId = "repuestoConverter"/>                                     
        </p:selectOneMenu>                               

        <p:outputLabel  for="txtCantidad" value="Cantidad" />
        <p:spinner style="width: 200px" id="txtCantidad" min="0" max="100" value="#{detallePedidoBean.cantidad}" required="true" requiredMessage="El campo 'Cantidad' es requerido" readonly="#{detallePedidoBean.soloLectura}" />                                

    </p:panelGrid>


    <div align="right">
        <p:outputLabel value = "* Campos Obligatorios"/>
    </div>
    <br/>
    <div align="center">
        <p:commandButton rendered="#{detallePedidoBean.activarNuevo}" 
                         update=":form:dtPedido,@form:dlDialog:dlRepuesto"
                         actionListener="#{detallePedidoBean.cargarRepuestos()}" partialSubmit="true" process="@form:dlDialog"
                         value="Agregar">                                  
            <p:confirm header="Confirmación" message="Esta seguro de guardar este registro?" icon="ui-icon-alert" />
        </p:commandButton>                                                                   
    </div>

</p:panel>

-->